<template>
  <div>
    <a-form :model="formState" :label-col="{span: 6}" :wrapper-col="{span: 14}">
      <a-row>
        <a-col :span="12" v-if="formState.tid">
          <a-form-item label="项目ID">
            {{ formState.tid }} <a-button type="primary" style="margin-left: 10px;" @click="onSetting">设置抽样</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="formState.tid">
          <a-form-item label="项目状态">
            {{statusDesc }} 
            <a-button type="link" style="margin-left: 10px;" @click="openSetStatus">修改状态</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="标题">
            <a-input v-model:value="formState.title" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属客户">
            <a-select v-model:value="formState.customerId">
              <a-select-option :value="option.id" v-for="option in customerOption" :key="option.id">{{ option.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="项目类型">
            <a-select v-model:value="formState.surveyType">
              <a-select-option :value="1">定性</a-select-option>
              <a-select-option :value="2">定量</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="奖励发放方式">
            <a-select v-model:value="formState.rewardType">
              <a-select-option :value="1">系统自动发放奖励</a-select-option>
              <a-select-option :value="2">手动发放奖励</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="样本需求量">
            <a-input-number style="width: 100%;" v-model:value="formState.requiredCompletes" :min="1" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="问卷时长(分钟)">
            <a-input-number style="width: 100%;" v-model:value="formState.loi" :min="1" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="完成奖励">
            <a-input-number style="width: 100%;" v-model:value="formState.successReward" :min="1" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="推荐奖励" extra="不填写或为0则没有推荐奖励">
            <a-input-number style="width: 100%;" v-model:value="formState.shareReward" :min="0" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="失败奖励">
            <a-input-number style="width: 100%;" v-model:value="formState.failReward" :min="0" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="项目经理">
            <a-select v-model:value="formState.executorId">
              <a-select-option :value="option.id" v-for="option in userList" :key="option.id">{{ option.username }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="执行周期">
            <a-range-picker v-model:value="formState.time" style="width: 100%;" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="项目单价">
            <a-input-number style="width: 100%;" v-model:value="formState.cpi" :min="0" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="参与设备" :label-col="{span: 3}">
        <a-radio-group v-model:value="formState.deviceType">
          <a-radio :value="1">不限制</a-radio>
          <a-radio :value="3">仅手机</a-radio>
          <a-radio :value="2">仅电脑</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="同一IP是否可以参与" :label-col="{span: 3}">
        <a-radio-group v-model:value="formState.ipUnique" disabled>
          <a-radio :value="1">允许</a-radio>
          <a-radio :value="0">不允许</a-radio>
        </a-radio-group>
      </a-form-item>
      
      <a-form-item label="是否允许未认证会员参与" :label-col="{span: 3}">
        <a-radio-group v-model:value="formState.qualify">
          <a-radio :value="0">允许</a-radio>
          <a-radio :value="1">不允许</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否包含前置问卷" :label-col="{span: 3}">
        <a-radio-group v-model:value="formState.preQuestion" disabled>
          <a-radio :value="0">允许</a-radio>
          <a-radio :value="1">不允许</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="组匹配规则" :label-col="{span: 3}">
        <a-radio-group v-model:value="formState.groupMatchRule" disabled>
          <a-radio :value="1">抽样组</a-radio>
          <a-radio :value="2">配额组</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否置顶" :label-col="{span: 3}">
        <a-radio-group v-model:value="formState.stick">
          <a-radio :value="1">置顶</a-radio>
          <a-radio :value="0">不置顶</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否显示在列表" :label-col="{span: 3}">
        <a-radio-group v-model:value="formState.display">
          <a-radio :value="1">显示</a-radio>
          <a-radio :value="0">不显示</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="项目链接" :label-col="{span: 3}" :wrapper-col="{span: 17}">
        <a-input v-model:value="formState.href" />
      </a-form-item>
      <a-form-item label="项目描述" :label-col="{span: 3}" :wrapper-col="{span: 17}">
        <a-textarea :rows="3" v-model:value="formState.description" />
      </a-form-item>
      <a-form-item label="欢迎词" :label-col="{span: 3}" :wrapper-col="{span: 17}">
        <Editor v-model:value="formState.welcomingSpeech" />
      </a-form-item>
      <a-form-item label="推荐词" :label-col="{span: 3}" :wrapper-col="{span: 17}">
        <a-textarea :rows="4" v-model:value="formState.recommendWords" />
      </a-form-item>
      <a-form-item :wrapper-col="{offset: 3,span: 17}">
        <a-button type="primary" @click="onSubmit">保存</a-button>
        <a-button style="margin-left: 10px" @click="onBefore">返回</a-button>
      </a-form-item>
    </a-form>
    <BasicModal @register="register">
      <a-form-item label="项目状态">
        <a-radio-group v-model:value="status">
          <a-radio :value="option.value" v-for="option in statusList" :key="option.value">{{ option.label }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <template #footer>
        <a-button type="primary" @click="onSubmitStatus">保存</a-button>
      </template>
    </BasicModal>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs';
import { message } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
import { customerList, adminList, editStatus, surveyEdit } from '@/api/survey';
import Editor from '@/components/Editor/index.vue';
import BasicModal from '@/components/Modal/BasicModal.vue';
import { useModal } from "@/components/Modal/useModal";
import { surveyDetails } from '@/api/survey.js'
const router = useRouter()
const route = useRoute()
const formState = ref({
  title: undefined,
  customerId: undefined,
  surveyType: 2,
  rewardType: 1,
  requiredCompletes: undefined,
  loi: undefined,
  successReward: undefined,
  shareReward: undefined,
  failReward: undefined,
  executorId: undefined,
  time: undefined,
  cpi: undefined,
  deviceType: 1,
  qualify: 0,
  stick: 0,
  display: 0,
  href: undefined,
  welcomingSpeech: undefined,
  recommendWords: undefined,
  preQuestion: 1,
  groupMatchRule: 1,
  description: undefined,
  ipUnique: 1
});
const [register, { actionDialog: openStatus }] = useModal({
  title: "修改状态",
  width: 600
});
const userList = ref([]);
const customerOption = ref([]);
const statusList = ref([
  { label: '进行中', value: 1 },
  { label: '暂停', value: 2 },
  { label: '待上线', value: 0 },
  { label: '待发放奖励', value: 3 },
  { label: '结束', value: -1 },
])
const status = ref()
const statusDesc = ref()
onMounted(() => {
  if (route.query.tid) {
    surveyDetails({ tid: route.query.tid }).then(res => {
      formState.value = {
        ...res.data,
        time: res.data.startTime ? [dayjs(res.data.startTime), dayjs(res.data.endTime)] : []
      }
      statusDesc.value = statusList.value.find(i => i.value === res.data.status).label
      status.value = res.data.status
    })
  }
  customerList({}).then(res => {
    customerOption.value = res.data.list.map(i => ({...i,id:i.id.toString()}))
  })
  adminList({}).then(res => {
    userList.value = res.data
  })
})
const openSetStatus = () => {
  status.value = formState.value.status
  openStatus(true)
}
const onSubmitStatus = () => {
  editStatus({ tid: route.query.tid, status: status.value }).then(res => {
    message.success('保存成功')
    formState.value.status = status.value
    statusDesc.value = statusList.value.find(i => i.value === status.value).label
    openStatus(false)
  })
}
const onSubmit = () => {
  const req = { ...formState.value }
  if (req.time.length >= 2 && req.time[0] && req.time[1]) {
    req.startTime = req.time[0].valueOf()
    req.endTime = req.time[1].valueOf()
  }
  surveyEdit(req).then(res => {
    message.success('保存成功')
    router.push('/task/list')
  })
};
const onBefore = () => {
  router.go(-1);
};
const onSetting = () => {
  router.push(`/task/setting?tid=${route.query.tid}`)
}
</script>